<template>
  <!--
  watch:侦听器
  作用：侦听某数据的变化后执行一个事件
  用法:
     watch:{
        需要侦听的数据字段名:{
          handler(newVal,oldVal){
            ....
          },
          deep:是否深度侦听
             默认侦(false)听栈的变化，如果堆与栈都侦听就是true
          immediate:是否立即执行回调
        }
     }

     数据：
        简单：String,Number,Boolean,null,undefined
           存储在栈
        复杂:Array,Function,Object
           存储在堆

 -->

  <div>
    {{ obj }}
    <button @click="obj.age++">修改age</button>
    <button @click="btnClick">修改age</button>
    <hr />
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {
      obj: {
        name: '张三',
        age: 18
      },
      num: 1
    }
  },
  watch: {
    num: {},
    obj: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      immediate: true
      // deep: true
    },
    $route: {
      handler (newVal, oldVal) {
        console.log('newVal', newVal)
      }
    }
  },
  methods: {
    btnClick () {
      this.obj = {
        name: '张三',
        age: 99
      }
    }
  }
}
</script>
<style></style>
